<script setup>
    import moment from 'moment';
    //点击首页按钮回到首页
    import { useRouter } from 'vue-router';
    import { ref, onMounted, onBeforeUnmount } from 'vue';
    //获取路由器对象
    let router = useRouter();
    //存储当前时间
    let time = ref(moment().format('YYYY年MM月DD日 HH:mm:ss'));
    let timer = ref(0);
    //按钮的点击回调
    const goHome = () => {
        router.push('/home')
    }
    //组件挂载完毕更新当前的事件
    onMounted(() => {
        timer.value = setInterval(() => {
            time.value = moment().format('YYYY年MM月DD日 HH:mm:ss');
        }, 1000);
    });

    onBeforeUnmount(() => {
        clearInterval(timer.value);
    })
</script>
<template>
    <div class="top">
        <div class="left">
            <span
                class="lbtn"
                @click="goHome"
            >首页</span>
        </div>
        <div class="center">
            <div class="title">xxx数据大屏</div>
        </div>
        <div class="right">
            <span class="rbtn">统计报告</span>
            <span class="time">当前时间:{{ time }}</span>
        </div>
    </div>
</template>
<style scoped>
    .top {
        width: 100%;
        height: 40px;
        display: flex;
    }

    .left {
        flex: 1.5;
        background: url(../../images/dataScreen-header-left-bg.png) no-repeat;
        background-size: cover;
    }

    .left .lbtn {
        width: 150px;
        height: 40px;
        float: right;
        background: url(../../images/dataScreen-header-btn-bg-l.png) no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 40px;
        color: #29fcff;
        font-size: 20px;
        cursor: pointer;
    }

    .center {
        flex: 2;
    }

    .center .title {
        width: 100%;
        height: 74px;
        background: url(../../images/dataScreen-header-center-bg.png) no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 74px;
        color: #29fcff;
        font-size: 30px;
    }

    .right {
        flex: 1.5;
        background: url(../../images/dataScreen-header-left-bg.png) no-repeat;
        background-size: cover;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .right .rbtn {
        width: 150px;
        height: 40px;
        background: url(../../images/dataScreen-header-btn-bg-r.png) no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 40px;
        color: #29fcff;
        font-size: 20px;
        cursor: pointer;
    }

    .right .time {
        color: #29fcff;
        font-size: 20px;
        margin-right: 10px;
    }
</style>